<template>
  <div>
    <!-- 粒子库 -->
    <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :options="options"
    />
    <!-- 表单 -->
    <div class="formContainer">
      <h3>OneHub 后台管理系统</h3>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        status-icon
        :rules="loginRules"
        label-width="90px"
        size="large"
        class="ruleForm"
      >
        <!-- 用户名 -->
        <el-form-item
          label="用户名"
          prop="username"
          style="width: 90%;"
        >
          <el-input
            v-model="loginForm.username"
            autocomplete="off"
          />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item
          label="密码"
          prop="password"
          style="width: 90%;"
        >
          <el-input
            v-model="loginForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            type="success"
            @click="login()"
            style="width: 88%; background: #61c354;"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { loadFull } from "tsparticles";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter();
// 粒子库的配置
const options = {
  background: {
    color: {
      value: '#f3be50'
    }
  },
  fpsLimit: 120,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: 'push'
      },
      onHover: {
        enable: true,
        mode: 'repulse'
      },
      resize: true
    },
    modes: {
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40
      },
      push: {
        quantity: 4
      },
      repulse: {
        distance: 200,
        duration: 0.4
      }
    }
  },
  particles: {
    color: {
      value: '#ffffff'
    },
    links: {
      color: '#ffffff',
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1
    },
    collisions: {
      enable: true
    },
    move: {
      direction: 'none',
      enable: true,
      outModes: {
        default: 'bounce'
      },
      random: false,
      speed: 4,
      straight: false
    },
    number: {
      density: {
        enable: true,
        area: 800
      },
      value: 80
    },
    opacity: {
      value: 0.5
    },
    shape: {
      type: 'circle'
    },
    size: {
      value: { min: 1, max: 5 },
    }
  },
  detectRetina: true
}
// 粒子库方法
const particlesInit = async engine => {
  await loadFull(engine);
};
// 表单引用对象
const loginFormRef = ref()
// 表单响应式数据对象
const loginForm = reactive({
  username: '',
  password: '',
})
// 表单校验规则
const loginRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度必须为3~5个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})
// 登录按钮触发的回调
const login = () => {
  // 校验表单  
  loginFormRef.value.validate((isValid) => {
    // console.log(isValid) // 是否所有表单校验都通过
    if (isValid) {
      axios.post('/adminapi/user/login', loginForm).then(res => {
        if (res.data.ActionType === 'OK') {
          // console.log(res.data.data)
          store.commit('changeUserInfo', res.data.data)
          store.commit('changeGetterRouter',false)
          router.push('/index')
        } else {
          ElMessage({
            message: '用户名和密码不匹配',
            type: 'error',
          })
        }

      })
    }
  })
}
</script>

<style scoped>
.formContainer {
  height: 300px;
  width: 500px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(232, 104, 92, 0.5);
  padding: 20px;
}

h3 {
  font-size: 30px;
  text-align: center;
  margin-top: 20px;
}

.ruleForm {
  margin-top: 50px;

}
</style>